<template>
  <div class="bret">
    <GongYong class="header"></GongYong>
    <main>
      <div class="content">
        <div class="content_input">
          <div class="inppt">
            <p>规格搜索：</p>
            <el-input v-model="input" placeholder="请输入商品规格"></el-input>
            <el-button
              type="info"
              plain
              icon="el-icon-search"
              @click="kwywor"
            ></el-button>
          </div>
        </div>
        <div class="content_button">
          <el-button type="primary">主要按钮</el-button>
          <el-button>默认按钮</el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="
            tableData.slice(
              (currentPage - 1) * pagesize,
              currentPage * pagesize
            )
          "
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="ID" width="80"> </el-table-column>
          <el-table-column prop="title" label="规格名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="word" label="商品规格" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="price" label="商品属性" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="edit(scope.row, tableData)"
                type="text"
                size="small"
              >
                编辑
              </el-button>
              <el-button
                @click.native.prevent="edit(scope.row, tableData)"
                type="text"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </main>
  </div>
</template>

<script>
import GongYong from "./gongyong.vue";
import axios from "axios";
export default {
  name: "Bret",
  components: {
    GongYong,
  },
  data() {
    return {
      tableData: [],
      total: 2, //总页
      currentPage: 1, //初始页
      pagesize: 8, //每页数据
      multipleSelection: [],
      input: "", //搜索
    };
  },
  created() {
    axios.get("http://127.0.0.1:7001/getList").then((res) => {
      this.tableData = res.data.data;
      console.log("res...", res.data.data);
    });
  },
  methods: {
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    kwywor() {
      axios
        .get(`http://127.0.0.1:7001/getList/?keyword=${this.input}`)
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
  },
};
</script>

<style scoped lang="scss">
.bret {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #efefef;
}
.input {
  width: 50%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  p {
    width: 100px;
  }
}
main {
  flex: 1;
}
.content_input {
  width: 100%;
  padding: 10px 0;
  background: #fff;
  .inppt {
    width: 30%;
    display: flex;
    align-items: center;
    p {
      width: 100px;
    }
  }
}
.content_button{
  width: 100%;
  background: #fff;
  padding: 10px;
}
</style>